<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="!token" class="force-login-wrap">
			<view class="force-login__content y-f">
				<open-data class="user-avatar" type="userAvatarUrl"></open-data>
				<open-data class="user-name" type="userNickName"></open-data>
				<view class="login-notice">为了提供更优质的服务，需要用户授权登录</view>
				<button class="cu-btn author-btn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">用户登录</button>
				<button class="cu-btn author-btn" v-else @getuserinfo="getUserInfo"
					open-type="getUserInfo">用户登录</button>
				<button class="cu-btn close-btn" @tap="back">暂不授权</button>
			</view>

			<!-- <view class="userAgreement">
				<checkbox-group @change="monitorCheckbox">
					<label>
						<checkbox value="agree" checked="true"  /><text class="text">我已阅读并同意</text> <text class="Agreement" @tap.stop="Agreement">《用户及隐私协议》</text>
					</label>
				</checkbox-group>
			</view> -->
		</view>
		<view v-if="token&&!userInfo.phone" class="force-login-wrap">
			<view class="force-login__content y-f">
				<open-data class="user-avatar" type="userAvatarUrl"></open-data>
				<open-data class="user-name" type="userNickName"></open-data>
				<view class="login-notice">为了提供更优质的服务，需要获取您的手机号</view>
				<button class="cu-btn author-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					绑定手机
				</button>
				<button class="cu-btn close-btn" @tap="back">暂不授权</button>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="force-login-wrap">
			<view class="force-login__content y-f">
				<view class="login-notice">为了提供更优质的服务，请先登录</view>
				<button class="cu-btn author-btn" @tap="toLogin">去登录</button>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import {
		wxappAuth,
		getUser,
		wxappBindingPhone,
		getUserInfo
	} from '@/api/user'
	import dayjs from 'dayjs'
	import cookie from '@/utils/store/cookie'
	import {
		login,
		authorize
	} from '@/utils'

	export default {
		data() {
			return {
				authorize: false,
				canIUseGetUserProfile: false,
				userAgreement: true
			}
		},
		computed: {
			...mapState(['isAuthorization', '$deviceType', 'token']),
			...mapGetters(["userInfo",'token']),
		},
		onLoad() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
			// // 先校验用户是否授权，如果没有授权，显示授权按钮
		},
		onHide() {
			this.updateAuthorizationPage(false)
			this.changeAuthorization(false)
		},
		onUnload() {
			this.updateAuthorizationPage(false)
			this.changeAuthorization(false)
		},
		methods: {
			...mapActions(['changeAuthorization', 'setUserInfo']),
			...mapMutations(['updateAuthorizationPage']),
			toLogin() {
				this.$yrouter.push({
					path: '/pages/user/Login/index',
					query: {},
				})
			},
			
			Agreement(){
				console.log('跳转用户协议页面')
			},
			monitorCheckbox(e){
				let agreement = e.detail.value;
				if(agreement == 'agree'){
					this.userAgreement = true
				}else{
					this.userAgreement = false
				}
			},
			back() {
				this.$parent.closeLogin()
				this.$yrouter.switchTab({
					path: '/pages/home/index',
					query: {},
				})
			},
			getUserInfo(data) {
				if (data.detail.errMsg == 'getUserInfo:fail auth deny') {
					uni.showToast({
						title: '取消授权',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				uni.showLoading({
					title: '登录中',
				})
				login()
					.then(e => {
						uni.hideLoading()
					})
					.catch(error => {
						uni.hideLoading()
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000,
						})
					})
			},
			getUserInfoProfile(data) {
				if(!this.userAgreement){
					uni.showToast({
						title: '请勾选用户及隐私协议',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '需要获取您的信息用来展示',
					success: res => {
						uni.showLoading({
							title: '登录中',
						})
						login(res)
							.then(e => {
								if (this.userInfo.phone == '' || this.userInfo.phone == null) {
									return
								} else {
									// #ifdef H5
									this.$yrouter.reLaunch({
										path: cookie.get('redirect').replace(/\ /g, ''),
									})
									// #endif

									// #ifdef MP-WEIXIN

									let pages = getCurrentPages()
									let currentPage = pages[pages.length - 1] //获取当前页面的对象
									let url = currentPage.route //当前页面url
									if(url === 'pages/user/User/index'){
										this.$parent.updateDate()
										this.$parent.closeLogin()
										this.$yrouter.reLaunch({
											path: cookie.get('redirect').replace(/\ /g, ''),
										})
									}else if(url === 'pages/authorization/index'){
										this.$yrouter.reLaunch({
											path: "/pages/Loading/index"
										});
									}
									
									

									// #endif
								}
							})
							.catch(error => {
								uni.showToast({
									title: error,
									icon: 'none',
									duration: 2000,
								})
							})
					},
				})
			},
			getPhoneNumber: function(e) {
				let thit = this
				// 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '绑定中',
					})
					wxappBindingPhone({
							encryptedData: e.mp.detail.encryptedData,
							iv: e.mp.detail.iv,
						})
						.then(res => {
							// this.User();
							thit.$store.dispatch('userInfo', true)
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000,
							})

							// #ifdef H5
							this.$yrouter.reLaunch({
								path: cookie.get('redirect').replace(/\ /g, ''),
							})
							// #endif

							// #ifdef MP-WEIXIN
							
							let pages = getCurrentPages()
							let currentPage = pages[pages.length - 1] //获取当前页面的对象
							let url = currentPage.route //当前页面url
							if(url === 'pages/user/User/index'){
								this.$parent.updateDate()
								this.$parent.closeLogin()
								this.$yrouter.reLaunch({
									path: cookie.get('redirect').replace(/\ /g, ''),
								})
							}else if(url === 'pages/authorization/index'){
								this.$yrouter.reLaunch({
									path: "/pages/Loading/index"
								});
							}
							

							// #endif
						})
						.catch(error => {
							uni.hideLoading()
							thit.$store.dispatch('userInfo', true)
							uni.showToast({
								title: error.msg || error.response.data.msg || error.response.data.message,
								icon: 'none',
								duration: 2000,
							})
						})
				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			}
		},
		mounted() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
		},
	}
</script>

<style lang="less">
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
	}

	.force-login-wrap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 11111;
		top: 0;
		background-image: url(https://judou.ylsp.vip/file/static/login_bgs.jpg);
		background-size: 100% 100%;

		.logo-bg {
			width: 640rpx;
			height: 300rpx;
		}

		.force-login__content {
			position: absolute;
			left: 50%;
			top: 640rpx;
			transform: translate(-50%, -50%);
			background: #ffffff;
			border-radius: 10rpx;
			box-shadow: 2rpx 2rpx 20rpx #ccc;
			padding: 30rpx 30rpx 50rpx 30rpx;

			.user-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 40rpx;
			}

			.user-name {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000;
				margin-bottom: 30rpx;
			}

			.login-notice {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000;
				line-height: 44rpx;
				width: 500rpx;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.author-btn {
				width: 630rpx;
				height: 80rpx;
				background: linear-gradient(to right, #291c6b 0%, #7f43fd 100%);
				background: -moz-linear-gradient(to right, #291c6b 0%, #7f43fd 100%);
				// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}

			.close-btn {
				width: 630rpx;
				height: 80rpx;
				margin-top: 30rpx;
				border-radius: 40rpx;
				border: 2rpx solid #eb3729;
				background: none;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #eb3729;
			}
		}

		.userAgreement {
			position: absolute;
			top: 1030rpx;
			width: 100%;
			text-align: center;
			
			.text{
				font-size: 30rpx;
			}
			
			.Agreement{
				font-size: 30rpx;
				color: #39c;
			}
		}
	}
</style>
